<template>
  <view
    class="v-select"
    :style="customStyle"
    @click="clickHandle"
  >
    <slot>
      <view
        class="v-select-content"
        :class="{ placeholder: !value }"
        :style="{ textAlign: align }"
      >
        {{ value || placeholder }}
      </view>
    </slot>
    <wd-icon
      name="arrow-right"
      size="24rpx"
      color="#999999"
    />
  </view>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue';

const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    value?: string;
    placeholder?: string;
    disabled?: boolean;
    customStyle?: CSSProperties;
    align?: 'left' | 'center' | 'right';
  }>(),
  {
    value: undefined,
    placeholder: '请选择',
    disabled: false,
    customStyle: undefined,
    align: 'left'
  }
);

const emits = defineEmits<{
  'update:model-value': [val: boolean];
}>();

const disabled = toRef(props, 'disabled');

const clickHandle = () => {
  if (disabled.value) return;
  emits('update:model-value', true);
};
</script>

<style scoped lang="scss">
.v-select {
  display: flex;
  align-items: center;
  .v-select-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    flex: 1;
    line-height: 1.5rem;
    min-height: 1.5rem;
    &.placeholder {
      color: rgb(201, 205, 212);
    }
  }
  .v-select-icon {
    display: block;
    width: 20rpx;
    height: 10rpx;
    padding: 0 10rpx;
    align-self: center;
    transform-origin: center;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    &.active {
      transform: rotate(180deg);
    }
  }
}
</style>
